<template>
  <div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
        <div class="inputs">
          <!-- 使用自定义组件的时候，当我们给便签设置属性，这些属性会自动成为组件的根标签属性，（props中的属性除外） -->
          <!-- v-model: 绑定的value值相当于传值过去
          功能1：能双向绑定表单元素的value属性
          功能2：能够监听表单元素的input事件，并将input中传递过来的数据同步给 v-model绑定的变量
           -->
           <!-- 原来的:value 变成v-model -->
            <hmInput placeholder='请输入手机号' 
            ref="username"
              v-model='user.username'  
              :reg='/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/' type='text' >
            </hmInput>
            <hmInput placeholder='请输入密码' 
            ref="password"
              v-model='user.password' :reg="/^.{3,16}$/" type="password" >
            </hmInput>
        </div>
        <p class="tips">
            没有账号？
            <a href="#/register" class="">去注册</a>
        </p>
        <!-- <div class="button">登录按钮</div> -->
        <!-- <van-icon name="star-o" /> -->
        <van-button type="danger" block round icon='star-o' @click="loginFn">登录</van-button>
    </div>
</div>
</template>

<script>

import hmInput from '@/components/hmInput.vue'
import { login } from '@/apis/user.js'
export default {
  components:{hmInput},
  data(){
    return{
      user:{
        username:'15875339307',
        password:'123'
      }
    }
  },
  methods:{
   loginFn(){

     //登录之前判定input框的isOK属性是否是绿色的,用到ref属性，$refs接收
     console.log(52,this.$refs);
     let { username , password } = this.$refs
     if(!username.isOK || !password.isOK){
       this.$toast.fail('内容不合法')
       return
     }
  

     login(this.user).then(res=>{
       console.log(49,res);
       //成功则没有statusCode
       if(res.data.statusCode){
        // 登录失败
       }else{
         //登录成功，跳转
         //登录保存id和token
         localStorage.setItem('heima-token',res.data.data.token)
         localStorage.setItem('heima-id',res.data.data.user.id)
         //登录成功，跳转首页
         console.log(71,this.$route.hash);
         if(this.$route.hash){
           this.$router.push(this.$route.hash.split('#')[1])
         }
         else{
         this.$router.push('/index')
         }
       }
       //vant轻提示
       this.$toast({
         message:res.data.message
       })
     })
   }
  }
}
</script>

<style lang="less">
  .container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
        }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>